<template>
  <div class="login">
    <div class="login-logo"></div>
    <div :class="['login-form', loginTab === 'register' ? 'register' : '']">
      <div class="login-tabs f-r a-c">
        <div :class="['login-tab', loginTab === 'login' ? 'active' : '']" @click="loginTab = 'login'">登录</div>
        <div :class="['login-tab', loginTab === 'register' ? 'active' : '']" @click="loginTab = 'register'">注册</div>
      </div>
      <LoginForm v-if="loginTab === 'login'" @changeLoginType="val => loginTab = val"/>
      <RegisterForm v-if="loginTab === 'register'" @changeLoginType="val => loginTab = val"/>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import LoginForm from "@/views/login/login-form.vue";
import RegisterForm from "@/views/login/register-form.vue";
const loginTab = ref('login')
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/login_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 148px;
  overflow: auto;
  position: relative;
  .login-logo {
    background-image: url("~@/assets/login_logo.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 295px;
    height: 76px;
    position: absolute;
    left: 68px;
    top: 73px;
  }
  .login-form {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("~@/assets/login_form_bg.png");
    width: 430px;
    &.register {
      background-image: url("~@/assets/register_form_bg.png");
    }
    .login-tabs {
      width: 100%;
      .login-tab {
        flex: 1;
        height:58px;
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #9A9A9A;
        line-height: 58px;
        &.active {
          color: #17BDB2;
          font-size: 22px;
        }
      }
    }
  }
  .el-form-item {
    //margin-bottom: 30px;
  }
  .el-form-item__label {
    font-family: Source Han Sans CN;
    font-weight: 700;
    font-size: 16px;
    color: #1A1A1A;
    line-height: 71px;
    opacity: 0.8;
  }
  .el-input--large {
    height: 48px;
    line-height: 48px;
    .el-input__wrapper {
      border-radius: 10px;
      border: 1px solid #DBE5F0;
      box-shadow: none;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      line-height: 71px;
      color: #DBE5F0;
      &.is-focus {
        border: 1px solid #191919;
        color: #1A1A1A
      }
    }
  }
  .el-input--large .el-input__inner {
    height: 48px;
    line-height: 48px;
  }
  input:-internal-autofill-selected {
    background-color: transparent !important;
  }
  .login-button.el-button--large {
    line-height: 54px;
    height: 54px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 24px;
    color: #FFFFFF;
    border-radius: 10px;
  }
  .green-button {
    background-color: rgba(23, 189, 178, 1);
    border-color: rgba(23, 189, 178, 1);
  }
  .code-input {
    .el-input__wrapper {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .el-input-group__append {
      background-color: rgba(23, 189, 178, 1);
      border-color: rgba(23, 189, 178, 1);
      color: #FFFFFF;
      border-radius: 0px 10px 10px 0px;
    }
    &.disabled .el-input-group__append {
      background-color: rgba(23, 189, 178, 0.5);
      border-color: rgba(23, 189, 178, 0.5);
      color: #FFFFFF;
    }
  }
}
</style>
